<script setup lang="ts">
import { getCategoryList } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'
const datas = ref<any[]>([])
// const dayjs = useDayjs()
// const queryParams = {
//   "treeData": true,
//   "condition": [
//     {
//       "colName": "path_name",
//       "ruleType": "like]",
//       "value": "西安地情%"
//     }
//   ]
// }
// function getData() {
//   getCategoryList(queryParams).then((res) => {
//         datas.value = res.data[0].children.map(item=>({
//             name: item.classify_name,
//             data:[]
//         }))
//     }).catch(() => {
//     })
// }
// function clickItem(item) {
//     getHealthSX({
//         condition: [{ colName: 'id', ruleType: 'eq', value: item.id }],
//     },).then(res => {
//         navigateTo({
//             path: `/peopleHealth/healthyShaanxiDetail`,
//             query: {
//                 data: encode(res.data[0]),
//             },
//         })
//     })
// }
const props = defineProps({
  type: {
    type: [Array, String],
    default: () => [],
  },
  isFF: {
    type: Boolean,
    default: false,
  },
})
const nav: string[] = [
  "人文西安",
  "西安要情",
  "生态西安",
  "西安要事",
  "历史西安"
]
datas.value = [
  {
    name: "人文西安",
    data: [{
      name: "《西安市志》中的水陆庵——《黑神话：悟空》西安",
      num: 150
    },
    {
      name: "西安境内的秦岭七十二峪——黄池峪",
      num: 150
    }, {
      name: "西安古城墙的建筑风格——“古城墙”的由来",
      num: 180
    }, {
      name: "西安古镇的美食与文化——“西安美食”的由来",
      num: 150
    },
    ]
  }, {
    name: "西安要情",
    data: [{
      name: "《环境优美乡镇、生态村创建",
      num: 150
    }, {
      name: "西安市区的“绿色生活”",
      num: 150
    }, {
      name: "西安的“绿色城市”",
      num: 150
    }, {
      name: "西安的“绿色旅游”",
      num: 150
    }]
  }, {
    name: "生态西安",
    data: [{
      name: "西安的“绿色农业”",
      num: 150
    }, {
      name: "西安的“绿色工业”",
      num: 150
    }, {
      name: "西安的“绿色产业”",
      num: 150
    }, {
      name: "西安的“绿色城市”",
      num: 150
    }]
  }, {
    name: "西安要事",
    data: [{
      name: "省地方志办公室赴长安区开展地方志工作专题调研",
      num: 550
    }, {
      name: "省地方志办公室赴西安市开展地方志工作专题调研",
      num: 190
    }, {
      name: "省地方志办公室赴咸阳市开展地方志工作专题调研",
      num: 650
    }, {
      name: "省地方志办公室赴宝鸡市开展地方志工作专题调研",
      num: 650
    }]
  }, {
    name: "历史西安",
    data: [{
      name: "西安历史的“黄金十年”",
      num: 150
    }, {
      name: "唐朝的“西安府”",
      num: 1505
    }]
  }
]
const select = ref<string>("")
const showMes=ref<{name:string,num:number}[]>([])
const changeData = (name: string) => {
  select.value = name
  showMes.value = datas.value.find(item => item.name === name)?.data || []
}
changeData("人文西安")
</script>

<template>
  <div class="mx-auto bg-image border-2 border-solid border-#AC8358 "
    :class="{ 'w-1200px': props.type === '全部', 'w-900px': props.type !== '全部' }">
    <div flex="~  items-center justify-between" class="m-b-4">
      <div class="bg-l-image m-l-4 m-t-4">西安地情</div>
      <div v-for="(item, index) in nav" :key="index" class="m-x-4 m-t-4 bg-cn-img cursor-pointer" 
      :class="{ 'bg-cn-img-on': item === select}" @click="changeData(item)">
        {{ item }}</div>
      <div class="m-r-4 m-t-4 ">
        <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
        <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
      </div>
    </div>
    <div flex="~ justify-between wrap content-start" class="min-h-300px p-5">
      <div v-for ="(item, index) in showMes" flex="~ justify-between items-center wrap content-center" class="m-y-4px min-w-550px">
      <b class="cursor-pointer whitespace-nowrap max-w-430px overflow-hidden  text-ellipsis active:font-bold">{{ item.name}}</b>
      <p>{{ item.num }}人·阅读</p>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.bg-image {
  background-image: url('/img/homeShowbg2.png');
  background-repeat: round;


  .bg-l-image {
    background-image: url('/img/homeBookl.png');
    color: white;
    font-size: 1.6rem;
    width: 200px;
    padding-right: 2.25rem;
    line-height: 3.5rem;
    text-align: center;
    font-family: cursive;
  }

  .bg-cn-img {
    background-image: url('/img/homeShowbg2-in.png');
    padding: 11px;
    background-position: center;
    min-width: 145px;
    text-align: center;
  }

  .bg-cn-img-on{
      background-image: url('/img/homeShowbg2-in-on.png');
      color: white;
    }

}
</style>
